<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>validation progress example</title>
    <script src="../../node_modules/vue/dist/vue.js"></script>
    <script src="../../dist/vue-validator.js"></script>
    <style>
      input.invalid { border-color: red; }
      .errors { color: red; }
    </style>
  </head>
  <body>
    <div id="app">
      <label for="username">username:</label>
      <validity ref="validity" field="username" v-model="validation" :validators="validators">
        <input type="text" @input="handleValidate">
      </validity>
      <div class="errors">
        <p v-for="error in validation.result.errors">{{error.message}}</p>
      </div>
      <p class="exist1" v-if="validation.progresses.exist1">exist1 checking ...</p>
      <p class="exist2" v-if="validation.progresses.exist2">exist2 checking ...</p>
      <button type="button" v-if="!validation.progress">register</button>
      <pre>{{validation}}</pre>
    </div>
    <script>
      var vm = new Vue({
        data: {
          validators: { exist1: true, exist2: true },
          validation: { result: {}, progresses: {} }
        },
        validators: {
          exist1: function (val) {
            return function (resolve, reject) {
              setTimeout(function () { reject('already exist!!') }, 2000)
            }
          },
          exist2: function (val) {
            return function (resolve, reject) {
              setTimeout(function () { resolve() }, 4000)
            }
          }
        },
        methods: {
          handleValidate: function (e) {
            var validity = this.$refs.validity
            if (this.validation.progress) {
              return
            }
            validity.validate()
          }
        }
      }).$mount('#app')
    </script>
  </body>
</html>
